<template>
    <div class="app-container">
        <div class="filter-container">
            <el-form ref="listQuery" :model="listQuery" inline>
                <el-form-item label="进厂批次：" prop="tmpEnterBatchCode">
                    <el-select size="small" class="filter-item" style="width: 150px" v-model="listQuery.tmpEnterBatchCode" placeholder="请选择进厂批次" @change="batchCodeChange">
                        <el-option v-for="item in batchCodeOptions" :key="item" :label="item" :value="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属医院：" prop="hid">
                    <el-select size="small" clearable class="filter-item" :disabled="true" style="width: 150px" v-model="listQuery.hid" placeholder="所属医院">
                        <el-option v-for="item in hospitalOptions" :key="item.name" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="品类：">
                    <el-input size="small" style="width: 150px;" class="filter-item" v-model="typeName" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="分类：" prop="categoryId">
                    <el-select size="small" clearable class="filter-item" style="width: 130px" plceholder="请选择分类" v-model="listQuery.categoryId">
                        <el-option v-for="item in catOptions" :key="item.name" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="amount" label="衣物数量：">
                    <el-input size="small" clearable style="width: 150px;" class="filter-item" placeholder="请输入衣物数量" v-model="listQuery.amount">
                    </el-input>
                    <!--<a class="editNum" @click="addItem"><svg-icon icon-class="plus" /></a>-->
                </el-form-item>
                <el-form-item prop="mendCnt" label="缝补数量：">
                    <el-input size="small" clearable style="width: 150px;" class="filter-item" placeholder="请输入缝补数量" v-model="listQuery.mendCnt">
                    </el-input>
                    <a class="editNum" @click="addItem"><svg-icon icon-class="plus" /></a>
                </el-form-item>
            </el-form>
        </div>
        <el-row style="border-top: 1px solid #ddd;">
            <el-col :span="15">
                <div style="height: 32px;line-height: 32px;margin: 20px 0 20px 0;">
                    录入记录
                </div>
                <el-table :key='tableKey' :data="list" border fit highlight-current-row style="width: 100%" stripe>
                    <el-table-column align="center" width="60px" type="index" label="序号"></el-table-column>
                    <el-table-column align="center" label="分类" prop="categoryName"></el-table-column>
                    <el-table-column align="center" label="衣物数量" prop="clothesCnt" width="165px;">
                        <div slot-scope="scope" class="editNum">
                            <a @click="minNum(scope.row, scope.$index)"><svg-icon icon-class="minus" /></a>
                            <el-input size="small" @blur="changeClothCnt(scope.row)" style="width:90px" placeholder="请输入衣物数量" v-model="scope.row.clothesCnt" />
                            <a @click="addNum(scope.row, scope.$index)"><svg-icon icon-class="plus" /></a>
                        </div>
                    </el-table-column>
                    <el-table-column align="center" label="缝补数量" prop="mendCnt" width="165px;">
                        <div slot-scope="scope" class="editNum">
                            <a @click="minMendNum(scope.row, scope.$index)"><svg-icon icon-class="minus" /></a>
                            <el-input size="small" @blur="changeMendCnt(scope.row)" style="width:90px" placeholder="请输入缝补数量" v-model="scope.row.mendCnt" />
                            <a @click="addMendNum(scope.row, scope.$index)"><svg-icon icon-class="plus" /></a>
                        </div>
                    </el-table-column>
                    <el-table-column align="center" label="操作" width="150px" class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                            <el-button size="small" type="danger" @click="handleDelete(scope.row, scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="8">
                <div style="height: 32px;line-height: 32px;margin: 20px 0 20px 0;">
                    打捆列表
                    <el-button size="small" style="float: right;" class="filter-item" type="primary" icon="el-icon" @click="handleConfirm">打捆</el-button>
                </div>
                <el-table :key='2' :data="sumList" border fit highlight-current-row style="width: 100%" stripe>
                    <el-table-column align="center" width="60px" type="index" label="序号"></el-table-column>
                    <el-table-column align="center" label="分类" prop="categoryName"></el-table-column>
                    <el-table-column align="center" label="衣物数量" prop="count"></el-table-column>
                    <el-table-column align="center" label="缝补数量" prop="mendCnt"></el-table-column>
                </el-table>
            </el-col>
        </el-row>

        <el-dialog title="确认打捆" center :visible.sync="dialogPrint" @close="dialogPrint=false">
            <print :data="printData"></print>
        </el-dialog>
    </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { parseTime } from '@/utils'
  import { fetchHospitalList, hospitalBatchOrderRecentList } from '@/api/hospital'
  import { factoryBalingAddDetail, factoryBalingDelete, factoryBalingCreate, factoryBalingModifyDetail, fetchFactoryBalingByCode, factoryBalingPrepareCreate } from '@/api/factory'
  import print from '@/components/PrintTicket/print'

  export default {
    name: 'PackOthers',
    props: ['type'], // 1, 3, 4
    data() {
      return {
        tableKey: 0,
        list: [],
        sumList: [],
        listQuery: {
          hid: '',
          categoryId: '',
          enterBatchCode: '',
          tmpEnterBatchCode: '',
          amount: '',
          mendCnt: 0
        },
        hospitalOptions: [],
        catOptions: [],
        batchCodeOptions: [],
        dialogPrint: false,
        printData: {}
      }
    },
    components: {
      print
    },
    created: function() {
      this.getHospital()
      this.getBatchCode()
    },
    computed: {
      ...mapGetters([
        'fid'
      ]),
      typeName() {
        return { '1': '布草', '3': '手术服', '4': '传染服' }[this.type]
      }
    },
    filters: {
      parseTime
    },
    methods: {
      getBatchCode() {
        hospitalBatchOrderRecentList({ page: 1, size: 50 }).then(response => {
          this.batchCodeOptions = response.data || []
        })
      },
      getHospital() {
        fetchHospitalList({ page: 1, size: 500, fid: this.fid }).then(response => {
          this.hospitalOptions = response.data && response.data.list || []
        })
      },
      batchCodeChange() {
        if (this.list.length || this.sumList.length) {
          this.$confirm('更换进场批次将无法保存当前录入数据', '尚未完成打捆！确定要更换吗？', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.listQuery.enterBatchCode = this.listQuery.tmpEnterBatchCode
            this.prepareCreateBaling()
            this.list = []
            this.sumList = []
            this.catOptions = []
          }).catch(() => {
            this.listQuery.tmpEnterBatchCode = this.listQuery.enterBatchCode
          })
        } else {
          this.listQuery.enterBatchCode = this.listQuery.tmpEnterBatchCode
          this.prepareCreateBaling()
        }
      },
      prepareCreateBaling() {
        if (!this.listQuery.enterBatchCode) return
        factoryBalingPrepareCreate({ batchCode: this.listQuery.enterBatchCode, type: this.type }).then(response => {
          if (response.data) {
            this.list = response.data.detailList || []
            this.sumList = response.data.summary || []
            this.catOptions = response.data.categoryList || []
            this.listQuery.hid = response.data.hid || ''
          }
        })
      },
      addNum(row, index) {
        row.clothesCnt++
        this.changeClothCnt(row)
      },
      minNum(row, index) {
        if (row.clothesCnt <= 1) {
          this.handleDelete(row)
          return
        }
        row.clothesCnt--
        this.changeClothCnt(row)
      },
      changeClothCnt(row) {
        factoryBalingModifyDetail({ id: row.id, clothesCnt: row.clothesCnt, mendCnt: row.mendCnt }).then(response => {
          if (response.data) {
            this.list = response.data.detailList || []
            this.sumList = response.data.summary || []
          }
        })
      },
      addMendNum(row, index) {
        row.mendCnt++
        this.changeMendCnt(row)
      },
      minMendNum(row, index) {
        if (row.mendCnt <= 0) {
          return
        }
        row.mendCnt--
        this.changeMendCnt(row)
      },
      changeMendCnt(row) {
        factoryBalingModifyDetail({ id: row.id, clothesCnt: row.clothesCnt, mendCnt: row.mendCnt }).then(response => {
          if (response.data) {
            this.list = response.data.detailList || []
            this.sumList = response.data.summary || []
          }
        })
      },
      handleDelete(row, index) {
        factoryBalingDelete({ id: row.id }).then(response => {
          if (response.data) {
            this.list = response.data.detailList || []
            this.sumList = response.data.summary || []
          }
        })
      },
      addItem() {
        if (!this.listQuery.enterBatchCode) {
          this.$message({ message: '请先选择进厂批次', type: 'error', showClose: true })
          return
        }
        if (!this.listQuery.categoryId) {
          this.$message({ message: '请先选择分类', type: 'error', showClose: true })
          return
        }
        if (!this.listQuery.amount || !/^\d+$/.test(this.listQuery.amount)) {
          this.$message({ message: '请输入数量', type: 'error', showClose: true })
          return
        }
        factoryBalingAddDetail({ batchCode: this.listQuery.enterBatchCode, type: this.type, categoryId: this.listQuery.categoryId, clothesCnt: this.listQuery.amount, mendCnt: this.listQuery.mendCnt }).then(response => {
          if (response.data) {
            this.list = response.data.detailList || []
            this.sumList = response.data.summary || []
          }
        })
      },
      handleConfirm(row) {
        if (!this.listQuery.enterBatchCode) {
          this.$message({ message: '请先选择进厂批次', type: 'error', showClose: true })
          return
        }
        factoryBalingCreate({ batchCode: this.listQuery.enterBatchCode, type: this.type }).then(response => {
          if (response.data) {
            fetchFactoryBalingByCode({ code: response.data.code }).then(response => {
              this.printData = response.data || {}
              this.dialogPrint = true
            })
            this.prepareCreateBaling()
          }
        })
      }
    }
  }
</script>

<style scoped>
    .editNum div, .editNum a{
        float: left;
        text-align: center;
    }
    a.editNum, .editNum a {
        font-size: 25px;
        line-height: 32px;
    }
    .el-col.el-col-12 {
        padding: 0 15px;
    }
    .el-col.el-col-15 {
        padding-right: 20px;
    }
</style>
